<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>特效按钮</title>
  </head>
  <body>
    <div class="container">
      <button class="custom-btn btn"><span>Button</span></button>
    </div>
  </body>
  <style>
    :root {
      --body-bgc-color: rgb(141, 139, 139);
      --container-bgc-clor: rgb(201, 199, 199);
      --button-bgc-color: linear-gradient(
        0deg,
        rgba(255, 151, 0, 1) 0%,
        rgba(251, 75, 2, 1) 100%
      );
      --font-color: #fff;
      --font-weight: 500;
      --custom-btn-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
        7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
      --btn-before-after-shadow: -7px -7px 20px 0px rgba(255, 255, 255, 0.9),
        -4px -4px 5px 0px rgba(255, 255, 255, 0.9),
        7px 7px 20px 0px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
      --btn-before-after-bgc: rgba(251, 75, 2, 1);
    }
    html,
    body {
      height: 100vh;
      width: 100vw;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--body-bgc-color);
    }
    .container {
      width: 400px;
      height: 400px;
      background-color: var(--container-bgc-clor);
      border-radius: 2% 10%;
      box-shadow: 10px 10px 10px 0px #616161;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .custom-btn {
      position: relative;
      display: inline-block;
      width: 130px;
      height: 40px;
      color: var(--font-color);
      border-radius: 5px;
      padding: 10px 25px;
      font-family: "Times New Roman", Georgia, sans-serif;
      background: var(--button-bgc-color);
      font-weight: var(--font-weight);
      cursor: pointer;
      transition: all 0.45 ease;
      box-shadow: var(--custom-btn-shadow);
      outline: none;
    }
    .btn {
      border: none;
      line-height: 42px;
      padding: 0;
    }
    .btn > span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn::before,
    .btn::after {
      position: absolute;
      content: "";
      right: 0;
      bottom: 0;
      background: var(--btn-before-after-bgc);
      box-shadow: var(--btn-before-after-shadow);
      transition: all 0.45s ease;
    }
    .btn::before {
      height: 0%;
      width: 2px;
    }
    .btn::after {
      width: 0%;
      height: 2px;
    }
    .btn:hover {
      color: var(--btn-before-after-bgc);
      background: transparent;
    }

    .btn:hover::before {
      height: 100%;
    }

    .btn:hover::after {
      width: 100%;
    }

    .btn span:before,
    .btn span:after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      background: var(--btn-before-after-bgc);
      box-shadow: var(--btn-before-after-shadow);
      transition: all 0.45s ease;
    }

    .btn span:before {
      width: 2px;
      height: 0%;
    }

    .btn span:after {
      height: 2px;
      width: 0%;
    }

    .btn span:hover:before {
      height: 100%;
    }

    .btn span:hover:after {
      width: 100%;
    }
  </style>
</html>
